<template>
  <div>
    <el-row style="margin: 10px 0 10px 0" type="flex" justify="start">
      <el-col span="auto" style="margin-right: 5px">
        <el-avatar :src="poster.imgUrl" :size="45"></el-avatar>
      </el-col>
      <el-col span="auto">
        <el-row>
          <el-tag effect="dark" size="mini" :type="postTypeTag[post.type]" style="margin-right: 10px">{{
            postType[post.type]
          }}</el-tag>
          <span style="font-weight: bold">{{ poster.nickname }}</span>
        </el-row>
        <el-row class="box">
          <span style="margin-right: 5px">{{ post.gmtCreate }}</span>
          <i class="el-icon-location-outline"></i>
          <span>{{ post.address }}</span>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="title">{{ post.title }}</el-row>
    <el-row style="margin-bottom: 10px; font-size: 15px">{{ post.detail }}</el-row>
    <el-row v-show="hasImg">
      <el-image :src="item.imgUrl" v-for="item in imgList"></el-image>
    </el-row>
    <el-row class="box">
      <el-row>
        <el-col span="auto">
          <el-tag style="margin-right: 5px" size="medium">{{ post.itemTypeName }}</el-tag>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getPost } from "@/api/post/notReviewed";

export default {
  name: "PostDetail",
  props: {
    postId: Number
  },
  data() {
    return {
      post: {},
      poster: {},
      imgList: [],
      hasImg: false,
      postType: ['寻物', '认领'],
      postTypeTag: ['success', '']
    }
  },
  methods: {
    getPostInfo() {
      getPost(this.postId).then(res => {
        if (res.data.code === 200) {
          this.post = res.data.postDetailInfoVO
          this.poster = res.data.postDetailInfoVO.fromUser
          if (this.imgList === null) {
            this.imgList = []
            this.hasImg = false
          } else {
            this.imgList = res.data.postDetailInfoVO.postImageList
            this.hasImg = true
          }
        } else {
          // this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.getPostInfo()
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: 6px;
  font-size: 12px;
  color: #727272;
}

.title {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

.el-image {
  width: 20%;
  height: 20%;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 5%;
}
</style>
